<template>
  <div id="app">
		<myheader></myheader>
		<main>
				<div class="box box1">
					<news></news>
					<newslist></newslist>
					<curconfirm></curconfirm>
				</div>
				<div class="second">
					<zongji></zongji>
					<curve></curve>
					<rank></rank>
				</div>
				
				<div class="box">
					<bingtu></bingtu>
					<huizong></huizong>
					<shenfen></shenfen>
				</div>
		</main>
  </div>
</template>

<script>
import shenfen from '@/pages/shnegfen.vue'
import myheader from '@/pages/myheader.vue'
import api  from './api/index.js'
import curconfirm from './pages/curconfirm.vue'
import curve from './pages/curve.vue'
import rank from './pages/rank.vue'
import bingtu from './pages/bingtu.vue'
import huizong from '@/pages/huizhong.vue'
import news from './pages/news.vue'
import newslist from './pages/newslist.vue'
import zongji from './pages/zongji.vue'
export default {
  name: 'App',
  components: {
		shenfen,myheader,curconfirm,curve,rank,bingtu,huizong,news,newslist,zongji
  },
	created() {
		this.$store.dispatch('All');
	}
}
</script>

<style lang="less" scoped="scoped">
#app {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  background: linear-gradient(37deg,#8360c3,#2ebf91);
	box-shadow: rgba(17,17,26,.1) 2px 2px 16px;
	main{
		display: grid;
		grid-template-columns:1fr 2fr 1fr;
		.box1{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.second{
			padding-left: 1em;
			padding-right: 1em;
		}
	}
}
</style>
